<template>
    <div>
      <!-- 评估级别管理模块 -->
      <div id="headA">
        <div id="head">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: 'welcome' }">养老服务管理系统</el-breadcrumb-item>
            <el-breadcrumb-item><span style="color: #666666;">配置管理</span></el-breadcrumb-item>
            <el-breadcrumb-item><span style="color: #3C763D;">评估级别管理模块</span></el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
      <div id="PGJBGLshang">
        <span style="display: block; font-size: 20px; font-weight: 700; padding-top: 10px; margin-left: 10px;">搜索条件</span>
        <div style="width: 100%; height: 4px; background-color: #E7EAEC; margin-top: 10px;"></div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline" style="margin-top: -10px;">
          <el-form-item label="评估模板：" id="PGJBGLshangc">
            <el-select v-model="formInline.mobanid" clearable placeholder="请选择" size="small">
              <el-option v-for="item in xiala" :key="item.noid" :label="item.mobanname" :value="item.noid"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="onSubmit" id="PGJBGLshangb">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div id="XZGLxia">
        <div style="margin-left: 28px; padding-top: 20px; padding-bottom: 15px;">
          <el-row>
            <el-button size="small" type="success" @click.native="onAdd" plain>新建</el-button>
            <el-button size="small" type="primary" @click.native="onCha()" plain>查看</el-button>
            <el-button size="small" type="warning" @click.native="onXiu()" plain>修改</el-button>
            <el-popconfirm icon="el-icon-info" icon-color="red" title="确定删除吗？" @confirm="dels">
              <el-button type="danger" slot="reference" size="small" style="margin: 10px;" plain>删除</el-button>
            </el-popconfirm>
          </el-row>
        </div>
        <div>
          <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 95%; margin: auto;" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column type="index" width="90" label="序号" :index="indexAdd"></el-table-column>
            <el-table-column prop="mobanname" label="评估模板" width="150" show-overflow-tooltip></el-table-column>
            <el-table-column prop="pinggujibie" label="评估级别" width="150" show-overflow-tooltip></el-table-column>
            <el-table-column prop="min" label="最小值" width="150" show-overflow-tooltip></el-table-column>
            <el-table-column prop="max" label="最大值" width="150" show-overflow-tooltip></el-table-column>
          </el-table>
        </div>
      </div>
      <div class="block" style="margin-top: 20px; margin-left: 30px;">
        <el-pagination
          @size-change="xianshi"
          @current-change="yema"
          :current-page="formInline.dqNum"
          :page-sizes="[10, 20, 50]"
          :page-size="formInline.xsNum"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
      <div>
        <!-- 新增修改信息模块 ------------------------------------------------------------>
        <el-dialog :title="isAdd?'新建':'修改'" :visible.sync="dialogFormVisible" :append-to-body="true">
          <el-form :model="form1" ref="form1" :rules="rules">
            <div id="PGJBGLshangd">
              <el-form-item label="评估模块：" id="PGJBGLshangl" prop="mobanid">
                <el-select v-model="form1.mobanid" clearable placeholder="请选择" size="small" id="PGJBGLshanghk">
                  <el-option v-for="item in xiala" :key="item.noid" :label="item.mobanname" :value="item.noid"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <el-form-item id="PGJBGLshanghia" label="评估级别名称：" prop="pinggujibie" :label-width="formLabelWidth">
              <el-input size="mini" v-model="form1.pinggujibie" autocomplete="off" placeholder="请输入" style="width: 150px;"></el-input>
            </el-form-item>
            <el-form-item id="PGJBGLshanghib" label="最小值：" prop="min" :label-width="formLabelWidth">
              <el-input size="mini" v-model="form1.min" autocomplete="off" placeholder="请输入" style="width: 150px;"></el-input>
            </el-form-item>
            <el-form-item id="PGJBGLshanghi" label="最大值：" prop="max" :label-width="formLabelWidth">
              <el-input size="mini" v-model="form1.max" autocomplete="off" placeholder="请输入" style="width: 150px;"></el-input>
            </el-form-item>
            <!-- 文件上传1 -->
            <!-- <el-form-item label="免冠证件照：" prop="imgs" label-width="120px">
              <el-upload
                class="avatar-uploader"
                action="http://upload-z1.qiniup.com"
                :show-file-list="false"
                :data="shuju"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar" @click="getToken">
                <i v-else class="el-icon-plus avatar-uploader-icon" @click="getToken"></i>
                <div slot="tip" class="el-upload__tip"><span style="color: red;">*
                  </span>只能上传二寸免冠证件照片，jpg/png格式的文件，且不超过500kb</div>
              </el-upload>
            </el-form-item> -->
            <!-- 文件上传 -->
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="addPingGuJiBieGuanLi('form1')" v-show="isAdd">确 定</el-button>
            <el-button type="primary" @click="editPingGuJiBieGuanLi('form1')" v-show="!isAdd">保 存</el-button>
            <el-button @click="dialogFormVisible=false">取 消</el-button>
          </div>
        </el-dialog>
        <div>
          <el-drawer title="查看" :visible.sync="dialog" direction="ltr" :append-to-body="true" custom-class="demo-drawer" ref="drawer">
            <div class="demo-drawer__content">
              <el-form :model="formc">
                <div style="width: 300px; height: 40px; margin-left: 20px; margin-top: 15px;">
                  <el-form-item label="评估模板：" :label-width="formcLabelWidth">
                    <el-input v-model="formc.mobanname" autocomplete="off" disabled size="small"></el-input>
                  </el-form-item>
                </div>
                <div>
                  <el-form-item label="评估级别名称：" style="margin-left: 10px; margin-top: 15px;">
                    <el-input v-model="formc.pinggujibie" autocomplete="off" disabled size="small" style="width: 200px;"></el-input>
                  </el-form-item>
                </div>
                <div style="width: 300px; height: 40px; margin-left: 20px; margin-top: -5px;">
                  <el-form-item label="最小值：" :label-width="formcLabelWidth">
                    <el-input v-model="formc.min" autocomplete="off" disabled size="small"></el-input>
                  </el-form-item>
                </div>
                <div style="width: 300px; height: 40px; margin-left: 20px; margin-top: 20px;">
                  <el-form-item label="最大值：" :label-width="formcLabelWidth" >
                    <el-input v-model="formc.max" autocomplete="off" disabled size="small"></el-input>
                  </el-form-item>
                </div>
                <div style="width:300px; height: 40px; margin-left: 20px; margin-top: 20px;">
                  <el-form-item label="添加人：" :label-width="formcLabelWidth">
                    <el-input v-model="formc.founder" autocomplete="off" disabled size="small"></el-input>
                  </el-form-item>
                </div>
                <div style="width:300px; height: 40px; margin-left: 21px; margin-top: 20px;">
                  <el-form-item label="添加时间：" :label-width="formcLabelWidth">
                    <el-input v-model="formc.createdate" autocomplete="off" disabled size="small"></el-input>
                  </el-form-item>
                </div>
              </el-form>
              <div class="demo-drawer__footer" style="margin-left: 160px; margin-top: 90px;">
                <el-button @click="cancelForm">取 消</el-button>
              </div>
            </div>
          </el-drawer>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  export default {
    data() {
      return {
        formInline: {
          mobanid: '',
          dqNum: 1,
          xsNum: 10,
        },
        xiala: [{
          noid: '',
          mobanname: '',
        }],
        tableData: [{
          noid: '',
          mobanname: '',
          pinggujibie: '',
          min: '',
          max: '',
          mobanid: '',
        }],
        form1: {
          mobanid: '',
          mobanname: '',
          pinggujibie: '',
          min: '',
          max: '',
          createdate: '',
          updatedate: '',
          founder: '',
          imgs: '',
        },
        formc: {
          mobanname: '',
          pinggujibie: '',
          min: '',
          max: '',
          founder: '',
          createdate: '',
        },
        shuju:{
          key:"",
          token:""
        },
        rules: {
          mobanid: [
            { required: true, message: '请选择模板', trigger: 'change' }
          ],
          pinggujibie: [
            { required: true, message: '请输入评估级别名称', trigger: 'blur' }
          ],
          min: [
            { required: true, message: '请输入最小值', trigger: 'blur' }
          ],
          max: [
            { required: true, message: '请输入最大值', trigger: 'blur' }
          ],
        },
        total: 0,
        imageUrl: '',
        isAdd: true,
        dialogFormVisible: false,
        formLabelWidth:'200px',
        formcLabelWidth: '100px',
        multipleSelection: [],
        visible: false,
        dialog: false,
        loading: false,
      }
    },
    methods: {
      chaxun(){
        axios.post("/chain-api/pinggujibieguanli/page", this.formInline).then(res=>{
          this.tableData = res.data.list;
          this.total = res.data.total;
        })
      },
      onSubmit(){
        this.formInline.dqNum = 1;
        this.chaxun();
      },
      onAdd(){
        this.isAdd = true;
        this.dialogFormVisible = true;
        this.form1.mobanid = '';
        this.form1.mobanname = '';
        this.form1.pinggujibie = '';
        this.form1.min = '';
        this.form1.max = '';
        this.form1.createdate = '';
        this.form1.updatedate = '';
        this.form1.founder = '';
        this.form1.imgs = '';
      },
      //七牛云上传文件
      // handleAvatarSuccess(res, file) {
      //   console.log(res);//上传成功后返回值json{"hash":"FphhkBU4u7F36rDb58cqK3fCmloD","key":"testd705686f-d42a-4991-a55f-9b6479f65e55"}
      //   this.imageUrl = URL.createObjectURL(file.raw);
      //   this.form1.imgs="http://rkefi86kt.hb-bkt.clouddn.com/"+res.key;
      // },
      // beforeAvatarUpload(file) {
      //   const isJPG = file.type === 'image/jpeg';
      //   const isLt2M = file.size / 1024 / 1024 < 2;
      //   if (!isJPG) {
      //     this.$message.error('上传头像图片只能是 JPG 格式!');
      //   }
      //   if (!isLt2M) {
      //     this.$message.error('上传头像图片大小不能超过 2MB!');
      //   }
      //   return isJPG && isLt2M;
      // },
      // getToken(){
      //   axios.get("/chain-api/pinggujibieguanli/getToken/yanglaopics").then(res=>{
      //     this.shuju.token = res.data.data.token;
      //     this.shuju.key = res.data.data.fname;
      //     console.log(res);
      //   });
      // },
      addPingGuJiBieGuanLi(form1){
        this.$refs[form1].validate((valid) => {
          if (valid) {
            this.isAdd = false;
            this.dialogFormVisible = false;
            this.form1.founder = this.$store.state.loginuserinfo.userName;
            this.form1.createdate = this.dateTypeFormat('YYYY-mm-dd HH:MM:SS', new Date()),
            axios.post("/chain-api/pinggujibieguanli/addpgjbgl", this.form1).then(res=>{
              if (res.data.code) {
                this.$message('增加成功');
              } else {
                this.$message('增加失败');
              }
              this.onSubmit();
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      onCha(){
        let ids = this.multipleSelection.map(value => value.noid)
        if (ids.length != 1) {
          this.$message.error("请选择一条数据！")
          this.onSubmit();
        } else {
          var aid = ids[0];
          this.dialog = true;
          axios.get("/chain-api/pinggujibieguanli/" + aid).then(res=>{
            this.formc = res.data.data;
          });
        }
      },
      onXiu(){
        let ids = this.multipleSelection.map(value => value.noid)
        if (ids.length != 1) {
          this.$message.error("请选择一条数据！")
          this.onSubmit();
        } else {
          var aid = ids[0];
          this.isAdd = false;
          this.dialogFormVisible = true;
          axios.get("/chain-api/pinggujibieguanli/" + aid).then(res=>{
            this.form1 = res.data.data;
          });
        }
      },
      editPingGuJiBieGuanLi(form1){
        this.$refs[form1].validate((valid) => {
          if (valid) {
            this.dialogFormVisible=false;
            this.form1.updatedate = this.dateTypeFormat('YYYY-mm-dd HH:MM:SS', new Date()),
            axios.put("/chain-api/pinggujibieguanli/updatepgjbgl",this.form1).then(res=>{
              if (res.data.code) {
                this.$message('修改成功');
              } else {
                this.$message('修改失败');
              }
              this.onSubmit();
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //删除 数据
      dels() {
        let ids = this.multipleSelection.map(value => value.noid)
        if (ids.length == "") {
          this.$message.error("请选择！")
          this.onSubmit();
        } else {
          axios.post("/chain-api/pinggujibieguanli/dels", ids).then(res => {
            if (res.data.code) {
              this.$message.success("批量删除成功！")
              this.onSubmit()
            } else {
              this.$message.error("批量删除失败！")
              this.onSubmit()
            }
          })
        } 
      },
      cancelForm() {
        this.loading = false;
        this.dialog = false;
        clearTimeout(this.timer);
      },
      xianshi(a){
        this.formInline.xsNum = a;
        this.chaxun();
      },  
      yema(a){
        this.formInline.dqNum = a;
        this.chaxun();
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      // type序号 - 页面切换递增
      indexAdd(index) {
        const dq = this.formInline.dqNum; // 当前页码
        const xs = this.formInline.xsNum; // 每页条数
        return index + 1 + (dq - 1) * xs;  // 下标 + 1 + (当前页码 - 1) * 当前页显示的条数
      },
    },
    mounted(){
      this.chaxun()
      axios.get("/chain-api/pinggumoban/moban/").then((res) => {
        this.xiala = res.data.data;
      });
    }
  }
  </script>
  
  <style scope>
  #head{
    width: 1050px;
    height: 25px;
    margin-left: 20px;
    padding-left: 20px;
    padding-top: 10px;
    /* margin: auto; */
    border: 8px groove skyblue;
    background-color: #DFF0D8;
  }
  #headA{
    padding-top: 10px;
    padding-bottom: 10px;
  }
  #PGJBGLshang{
    width: 1090px;
    height: 110px;
    margin-left: 20px;
    background-color: #FFFFFF;
  }
  #XZGLxia{
    width: 1090px;
    height: 350px;
    margin-top: 25px;
    margin-left: 20px;
    background-color: #FFFFFF;
  }
  #pgjbglchaa{
    width: 80px;
    height: 50px;
    margin-top: 0px;
    margin-right: 0px;
  }
  #PGJBGLshanga{
    width: 150px;
    height: 30px;
  }
  #PGJBGLshangb{
    /* width: 75px;
    height: 38px; */
    font-size: 14px;
    background-color: #18A689;
    margin-top: 27px;
    margin-left: 18px;
  }
  #PGJBGLshangc{
    margin-top: 25px;
    margin-left: 25px;
  }
  #PGJBGLshangd{
    width: 300px;
    height: 40px;
    /* float: left; */
    /* display: inline-block; */
    margin-top: -20px;
    margin-left: 35px;
  }
  #PGJBGLshange{
    display: inline;
    width: 400px;
    height: 40px;
  }
  #PGJBGLshangf{
    width: 340px;
    height: 40px;
    margin-top: -55px;
    margin-left: 60px;
    margin-right: 0px;
    /* float: right; */
    /* display: inline-block; */
    /* background-color: aqua; */
  }
  #PGJBGLshangg{
    /* float: right; */
    width: 310px;
    height: 90px;
    /* background-color: blue; */
    /* margin-top: -20px; */
    margin-left: 0px;
    padding-left: 0px;
    padding-right: 0px;
  }
  #PGJBGLshangh{
    /* float: left; */
    margin-top: 0px;
    margin-left: 0px;
    padding-left: 10px;
    padding-right: 0px;
  }
  #PGJBGLshanghi{
    width: 300px;
    height: 40px;
    margin-top: -62px;
    margin-left: 230px;
    padding-left: 0px;
    padding-right: 0px;
  }
  #PGJBGLshanghib{
    width: 300px;
    height: 40px;
    margin-top: -20px;
    margin-left: -84px;
    padding-left: 0px;
    padding-right: 0px;
  }
  #PGJBGLshanghia{
    width: 300px;
    height: 50px;
    margin-top: -40px;
    margin-left: 220px;
    padding-left: 10px;
    padding-right: 0px;
  }
  #PGJBGLshanghj{
    width: 300px;
    height: 90px;
    margin-top: -112px;
    margin-left: 328px;
    padding-left: 0px;
    padding-right: 0px;
  }
  #PGJBGLshanghk{
    width: 160px;
    height: 35px;
    margin-top: 0px;
    margin-left: 0px;
    padding-left: 10px;
    padding-right: 0px;
    /* background-color: red; */
  }
  #PGJBGLshangl{
    width: 320px;
    height: 40px;
    margin-top: 0px;
    margin-left: 0px;
    padding-left: 0px;
    padding-right: 0px;
    /* background-color: red; */
  }
</style>